/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: YinJianFeng
 * @Date: 2024-03-29 10:15:27
 */
import { NavigationBar, NavigationItem, FeatureManager } from '@amcax/base';
import {
  // VscExtensions,
  VscSymbolProperty,
  VscCommentDiscussion,
  VscVersions,
} from 'react-icons/vsc';
// import ComponentPanel from './panels/ComponentPanel';
import { PropertyPanel } from './panels/PropertyPanel';
import { VersionPanel } from './panels/VersionPanel';
import MarksPanel from '@app-cad/common/widgets/RightNavigation/MarksPanel';
import React, { useEffect, useState } from 'react';

export function RightNavigation() {
  const [showMark, setShowMark] = useState(false);
  const [showVersion, setShowVersion] = useState(false);

  useEffect(() => {
    if (FeatureManager.isFeatureEnabled('electron-show-port')) {
      setShowMark(true);
    }
    if (FeatureManager.isFeatureEnabled('display-version-panel')) {
      setShowVersion(true);
    }
  }, []);

  const markStyles = showMark
    ? {}
    : {
        display: 'none',
      };

  const versionStyles = showVersion
    ? {}
    : {
        display: 'none',
      };

  return (
    <NavigationBar>
      <NavigationItem
        value='property'
        title='属性面板'
        icon={<VscSymbolProperty />}
        panel={<PropertyPanel />}
      />
      {/* <NavigationItem value='material' title='材质面板' icon={<VscSymbolColor />} panel={<MaterialPanel />} /> */}
      {/* <NavigationItem
        value='component'
        title='构件库'
        icon={<VscExtensions />}
        panel={<ComponentPanel />}
        style={styles}
      /> */}
      <NavigationItem
        value='mark'
        title='标签面板'
        icon={<VscCommentDiscussion />}
        panel={<MarksPanel />}
        style={markStyles}
      />
      <NavigationItem
        value='version'
        title='版本面板'
        icon={<VscVersions />}
        panel={<VersionPanel />}
        style={versionStyles}
      />
    </NavigationBar>
  );
}
